<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本溢出省略</title>
  </head>
  <body>
    <h1>文本溢出省略</h1>
    <h1>单行文本溢出</h1>
    <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
      番茄工作法是一种时间管理方法，通过将工作时间划分为多个固定时长的“番茄时间”（通常为25分钟），帮助人们集中注意力并提高工作效率。每个番茄时间之间休息5分钟，每完成4个番茄时间后休息更长时间（通常为15-30分钟）。
    </div>
    <h1>多行文本溢出</h1>
    <h2>基于高度截断</h2>
    <style>
      .text-container {
        width: 300px;
        border: 1px solid #ccc;
        padding: 10px;
        position: relative;
        line-height: 1.2;
        max-height: 3em; /* 3 行的最大高度 */
        overflow: hidden;
      }
      .text-container::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 25px;
        width: 20px;
        /* padding-left: 40px; */
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 1) 50%
        );
      }
    </style>
    <div class="text-container">
      这是一段很长的文本，用于测试多行文本溢出显示省略号的效果。这段文本可能会超出容器的范围，需要被截断并显示省略号。这是一段很长的文本，用于测试多行文本溢出显示省略号的效果。这段文本可能会超出容器的范围，需要被截断并显示省略号。
    </div>
    <style>
      p {
        width: 400px;
        border-radius: 1px solid red;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
    <p>这是⼀些⽂本这是⼀些⽂本这是⼀些⽂</p>
  </body>
</html>
